<template>
      
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
      <h2>添加</h2>
    <a-form-item label="作者">
      <a-input v-decorator="['author']" />
    </a-form-item>
    <a-form-item label="文章标题">
      <a-input v-decorator="['title',{ rules: [{ required: true, message: '标题必填项!!!' }] }]" />
    </a-form-item>
    <a-form-item label="文章描述">
      <a-textarea
        v-decorator="['desc']"
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="封面图片">
      <a-upload
        name="file"
        :multiple="true"
        action="/api/upload"
        :headers="headers"
        @change="handleChange"
      >
        <a-button> <a-icon type="upload" /> 请上传 </a-button>
      </a-upload>
    </a-form-item>
    <a-form-item label="文章详情">
      <div id="content"></div>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 18, offset: 9 }">
      <a-button type="primary" html-type="submit"> 提交 </a-button>
      <a-button type="primary" @click="chongz"> 重置 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import E from 'wangeditor'
import {addArt} from "@api"
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      previewVisible: false,
      previewImage: "",
      fileList: [],
       headers: {
        authorization: 'authorization-text',
      },
      thumb:'',
      editor:null,

    };
  },
  methods: {
    chongz(){
       this.$router.go(0)
    },
      init(){
        const editor = new E('#content')
        editor.create()
        this.editor=editor 
     },
     handleChange(info) {
      if (info.file.status !== 'uploading') {
      
      }
      if (info.file.status === 'done') {
      
       this.thumb=info.file.response.data.filePath

      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
  
  },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          values.thumb=this.thumb
          values.editor=this.editor.txt.html()
        this.values=values
          addArt(values).then(res=>{
            if(res.data.code===200){
           this.$message.success(res.data.msg,2,()=>{
                this.$router.go(0)
              })
            }
          })

        }
      });
    },

    handleSelectChange(value) {
      console.log(value);

      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
  },
  mounted(){
    this.init()
  },
  
};
</script>

<style lang="scss" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>